<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>服务器状态</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/layui.css" rel="stylesheet">
</head>
<body>
  <div style="width:30%;margin-top: 20px;">
    <form class="layui-form layui-form-pane1" lay-filter="serverstatus">
      <div class="layui-form-item">
        <label class="layui-form-label">CPU使用率</label>
        <div class="layui-input-block">
          <input type="text" name="cupUtilization" disabled class="layui-input" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">总的物理内存</label>
        <div class="layui-input-block">
          <input type="text" name="memorySize" disabled class="layui-input" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">内存使用率</label>
        <div class="layui-input-block">
          <input type="text" name="memoryUtilization" disabled class="layui-input" >
        </div>
      </div>
    </form>
  </div>
  
<script src="js/layui.js"></script>
<script type="module">
  import serverStatus from './js/server-status.js'

  layui.use(['form','layer'], function(){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var loadServerStatusData = function(){
        serverStatus.getServerStatus($,function(rspData){
            if(rspData.data != null){
                form.val('serverstatus', {
                    'cupUtilization': rspData.data.cupUtilization
                    ,'memorySize':rspData.data.memorySize
                    ,'memoryUtilization': rspData.data.memoryUtilization
                }); 
            }
        })
    }
    loadServerStatusData();
  });
</script>
</body>
</html>